
/**
 * 主面板
 * ----------------------------------------- 
 * 用于包裹界面内容，主要用于调整界面底色
 */
.container {
	background-color: #f5f5f5;
	min-height: 100vh;
}

/**
 * 盒模型
 * ----------------------------------------- 
 * 常用的布局组件，可以理解成卡片布局中的卡片
 */
.sea-panel {
	background-color: $uni-bg-color;
}

.sea-box {
	background-color: $uni-bg-color;
	margin-bottom: $uni-spacing-col-base;
}

/* 块元素：单行代码块 */
.block-row {
	display: block;
	padding: $uni-padding;
	border-bottom: $uni-border;
}

/**
 * 盒模型
 * ----------------------------------------- 
 * Flex布局：带布局的单行代码块，经典左中右布局 上中下布局
 */
.flex-row {
	display: flex;
	flex-direction: row;
	border-bottom: $uni-border;
	
	&.vertical {
		flex-direction: column;/* 切换成垂直布局 */
	}
	
	.box-body {
	  flex: 1;
		padding: $uni-padding;
	}
	  
	.box-left  {
		padding: $uni-padding;
	}
	
	.box-right {
		text-align: right;
		padding: $uni-padding;
	}
}

.flex-column {
	display: flex;
	flex-direction: column;
	border-bottom: $uni-border;
	
	.box-body {
	  flex: 1;
		padding: $uni-padding;
	}
	  
	.box-header  {
		display: block;
		padding: $uni-padding;
	}
	
	.box-footer {
		display: block;
		padding: $uni-padding;
	}
}


/**
 * 空面板
 * ----------------------------------------- 
 * 用户大抵是不喜欢点屏幕最底下的按钮，
 * 保留一定空间，允许将最底下的内容，拖拽到屏幕正中心。
 */
.bottom-space{
	height: 30vh;
}

/**
 * 微调属性
 * -----------------------------------------
 * 原则上来说，不要在代码中使用 style，
 * 通过这些属性微调，一般就能做出想要的效果 
 */
.block{
	display: block;
}

.padding {
	padding: $uni-padding;
}

.no-padding {
	padding: 0!important;
}

.margin {
	margin: $uni-spacing-col-base;
}

.margin-top {
	margin-top: $uni-spacing-col-base;
}

.margin-bottom {
	margin-bottom: $uni-spacing-col-base;
}

.margin-left {
	margin-left: $uni-spacing-col-base;
}

.margin-right {
	margin-right: $uni-spacing-col-base;
}

.no-margin {
	margin: 0!important;
}

.no-margin-bottom {
	margin-bottom: 0!important;
}

.border{
	border: $uni-border;
}

.border-top{
	border-top: $uni-border;
}

.border-bottom{
	border-bottom: $uni-border;
}

.border-left{
	border-left: $uni-border;
}

.border-right{
	border-right: $uni-border;
}

.border-radius{
	border-radius: $uni-border-radius-base;
}

.no-border{
	border: 0!important;
}

.no-border-bottom{
	border-bottom: 0!important;
}

/**
 * 盒模型间隙
 * --------------------
 * 给组件添加 margin，将元素分隔开，去除最后一个的 margin；
 * 在我们的组件中，大部分都不包含默认边框设计，这个样式会非常有用。
 */
$gap-width: $uni-gap;
$gap-height: $uni-gap;

.sea-gap-group {
  > * {
    margin-right: $gap-width;

    &:last-child {
      margin-right: 0;
    }
  }
}

.sea-gap-group-v {
  > * {
    margin-bottom: $gap-height;

    &:last-child {
      margin-bottom: 0;
    }
  }
}

.gap-right {
  margin-right: $gap-width;

  &:last-child {
    margin-right: 0;
  }
}

.gap-bottom {
  margin-bottom: $gap-height;

  &:last-child {
    margin-bottom: 0;
  }
}

/**
 * article 配套样式
 * ----------------------------------------- 
 * 样式选自 uni-title
 */
/* 可以理解成 <span> 标签 */
.text {
  font-size: $sea-font-size;
  color: $uni-color-paragraph;
}

/* 可以理解成 <p> 标签 */
.text-block {
  display: block; 
  font-size: $sea-font-size;
  color: $uni-color-paragraph;
  margin: $uni-spacing-col-base 0;
}

.text-h1 {
	font-size: $sea-font-size-h1;
	color: $uni-color-title;
	font-weight: bold;
}

.text-h2 {
	font-size: $sea-font-size-h2;
	color: $uni-color-title;
	font-weight: bold;
}

.text-h3 {
	font-size: $sea-font-size-h3;
	color: $uni-color-title;
	font-weight: bold;
	/* font-weight: 400; */
}

.text-h4 {
	font-size: $sea-font-size-h4;
	color: $uni-color-title;
	font-weight: bold;
	/* font-weight: 300; */
}

.text-h5 {
	font-size: $sea-font-size-h5;
	color: $uni-color-title;
	font-weight: bold;
	/* font-weight: 200; */
}

/**
 * 字体/背景
 * --------------
 * 使用频率超高的背景色、字体色
 */
.bg-default {
  color: $sea-color-white !important;
  background-color: $sea-color-default !important;
}
.bg-primary {
  color: $sea-color-white !important;
  background-color: $sea-color-primary !important;
}
.bg-info {
  color: $sea-color-white !important;
  background-color: $sea-color-info !important;
}
.bg-success {
  color: $sea-color-white !important;
  background-color: $sea-color-success !important;
}
.bg-warning {
  color: $sea-color-white !important;
  background-color: $sea-color-warning !important;
}
.bg-danger {
  color: $sea-color-white !important;
  background-color: $sea-color-danger !important;
}
.bg-error {
  color: $sea-color-white !important;
  background-color: $sea-color-danger !important;
}
.bg-fatal {
  color: $sea-color-white !important;
  background-color: $sea-color-fatal !important;
}
 
/* 字体色 */
.text-default {
  color: $sea-color-default !important;
}
.text-primary {
  color: $sea-color-primary !important;
}
.text-info {
  color: $sea-color-info !important;
}
.text-success {
  color: $sea-color-success !important;
}
.text-warning {
  color: $sea-color-warning !important;
}
.text-danger {
  color: $sea-color-danger !important;
}
.text-error {
  color: $sea-color-danger !important;
}
.text-fatal {
  color: $sea-color-fatal !important;
}
 
/* 禁用状态 */
[class^="bg-"].disabled {
  opacity: 0.65;
  filter: alpha(opacity=65);
}

/* 圆形 */
.box-circle {
  border-radius: 50%;
}

/* 圆形，高度自动匹配宽度，宽度必须有个确切的值，否则会影响布局 */
.sea-circle {
	width: 48px;
	height: auto;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
}

/* 方形，高度自动匹配宽度，宽度必须有个确切的值，否则会影响布局 */
.sea-square {
	width: 48px;
	height: auto;
	aspect-ratio: 1 / 1;
}
